// 引入base.less
@import url(base.less);

// 声明基准值
@baseSize:3.75vmin;

// header
.suspension-box {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #fff;
    z-index: 99;
    .m-navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 (12 / @baseSize) 0 (18 / @baseSize);
        height: (44 / @baseSize);
        .logo {
            i {
                font-size: (28 / @baseSize);
                color: #FB7299;
            }
        }
        .right {
            display: flex;
            .search {
                color: #ccc;
                i {
                    font-size: (22 / @baseSize);
                }
            }
            .user {
                width: (24 / @baseSize);
                height: (24 / @baseSize);
                margin: 0 (20 / @baseSize);
                img {
                    border-radius: 50%;
                }
            }
            .app_btn {
                width: (72 / @baseSize);
                height: (24 / @baseSize);
            }
        }    
    }
    .chanel-menu {
    position: relative;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: (40 / @baseSize);
    .tabs {
        overflow: hidden;
        flex: 1;
        .tab_list {
            display: flex;
            a {
                padding: 0 (16 / @baseSize);
                white-space: nowrap;
                font-size: (14 / @baseSize);
                height: (40 / @baseSize);
                line-height: (40 / @baseSize);
            }
            .line {
                position: absolute;
                left: (16 / @baseSize);
                bottom: 0;
                width: (28 / @baseSize);
                height: (2 / @baseSize);
                background-color: #FB7299;
            }
        }
    }
    .after {
        color: #ccc;
        width: (40 / @baseSize);
        height: (40 / @baseSize);
        text-align: center;
        line-height: (40 / @baseSize);
        i {
            font-size: (20 / @baseSize);
        }
    }
    }
}
// 主体
.home {
    padding:(85 / @baseSize) (5 / @baseSize) 0 ;
    .video_list {            
        display: flex;
        // 换行
        flex-wrap: wrap;
        .video_item {
            width: 50%;
            // height: 100%;
            // height: 150px;
            padding: (8 / @baseSize) (5 / @baseSize);
            p {
                    font-size: (12 / @baseSize);
                    margin-top: (5 / @baseSize);
                }
        }
        .card {
            position: relative;
            // height: (97 / @baseSize); 
            // img {
            //     vertical-align: middle;
            //     width: 100%;
            //     height: 100%;
            // }
            .cont {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: (27 / @baseSize);
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 (5 / @baseSize);
                font-size: (12 / @baseSize);
                background-image: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent);
                color: #ccc;
            }
        }
    }
}

// 底部
// .end {
//     position: fixed;
//     left: 0;
//     bottom: (50 / @baseSize);
//     width: 100%;
//     height: (34 / @baseSize);
//     .ending {
//         margin: 0 (30 / @baseSize);
//         height: (34 / @baseSize);
//         background-color: #FB7299;
//         text-align: center;
//         line-height: (34 / @baseSize);
//         font-size: (12 / @baseSize);
//         color: #fff;
//         border-radius: (17 / @baseSize);
//         i {
//             margin-right: (5 / @baseSize);
//         }
//     }
// }
.end {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: (50 / @baseSize);
    width: (270 / @baseSize);
    height: (34 / @baseSize);
    background-color: #FB7299;
    text-align: center;
    line-height: (34 / @baseSize);
    font-size: (12 / @baseSize);
    color: #fff;
    border-radius: (17 / @baseSize);
    i {
        margin-right: (5 / @baseSize) ;
    }
}